<template>
  <el-container style="height: 100vh">
    <!-- 左边侧边栏容器 -->
    <el-aside width="280px" style="height: 100vh">
      <!-- el-menu 是菜单容器 -->
      <el-menu router style="height: 100vh"
               default-active="2"
               class="el-menu-vertical-demo"
               background-color="#545c64"
               text-color="#fff"
               active-text-color="#ffd04b">

        <div class="title">在线学术社区系统</div>

        <!-- 管理员角色的菜单 -->
        <el-submenu index="2" v-if="user.role=='管理员'">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span>用户管理</span>
          </template>
          <el-menu-item index="/user/page">用户列表</el-menu-item>
        </el-submenu>
        <el-submenu index="4" v-if="user.role=='管理员'">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span>资源管理</span>
          </template>
          <el-menu-item index="/paper/page">文献管理</el-menu-item>
        </el-submenu>
        <el-submenu index="5" v-if="user.role=='管理员'">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span>AI助手</span>
          </template>
          <el-menu-item index="/api/chat">小翾问答</el-menu-item>
        </el-submenu>
        <el-submenu index="6" >
          <template slot="title">
            <i class="el-icon-location"></i>
            <span>学术论坛</span>
          </template>
          <el-menu-item index="/posts/list">帖子列表</el-menu-item>
          <el-menu-item index="/posts/manage" v-if="user.role=='管理员'">帖子管理</el-menu-item>
          <el-menu-item index="/posts/ranking" v-if="user.role=='管理员'">帖子排行</el-menu-item>
        </el-submenu>
        <el-submenu index="3" v-if="user.role=='管理员'">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span>api访问日志管理</span>
          </template>
          <el-menu-item index="/api/query">api访问日志查询</el-menu-item>
        </el-submenu>

        <!-- 其他角色的菜单 -->
        <el-submenu index="101" v-if="user.role=='采购员'">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span>表格的使用</span>
          </template>
          <el-menu-item index="/">采购员菜单1</el-menu-item>
          <el-menu-item index="/">采购员菜单2</el-menu-item>
          <el-menu-item index="/">采购员菜单3</el-menu-item>
        </el-submenu>
        <el-submenu index="201" v-if="user.role=='供应商'">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span>表格的使用</span>
          </template>
          <el-menu-item index="/">供应商菜单1</el-menu-item>
          <el-menu-item index="/">供应商菜单2</el-menu-item>
          <el-menu-item index="/">供应商菜单3</el-menu-item>
        </el-submenu>
        <el-submenu index="301" v-if="user.role=='审核员'">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span>表格的使用</span>
          </template>
          <el-menu-item index="/">审核员菜单1</el-menu-item>
          <el-menu-item index="/">审核员菜单2</el-menu-item>
          <el-menu-item index="/">审核员菜单3</el-menu-item>
        </el-submenu>
      </el-menu>
    </el-aside>

    <!-- 右边主体容器 -->
    <el-container>
      <!-- 顶部栏 -->
      <el-header style="text-align: right; font-size: 14px; line-height: 60px; background-color: #409EFF; color: #fff;">
        <span style="margin-right: 15px;">用户: {{ user.username }}</span>
        <span style="margin-right: 15px;">角色: {{ user.role }}</span>
        <el-button type="text" @click="logout" style="color: #fff;">退出登录</el-button>
      </el-header>

      <!-- 页面内容 -->
      <el-main style="height: calc(100vh - 60px);">
        <router-view/>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: "HomePage",

  data() {
    return {
      user: {},
    };
  },

  mounted() {
    try {
      this.user = JSON.parse(localStorage.getItem('user'));
      if (!this.user) {
        this.$router.replace('/login');
      }
    } catch (e) {
      this.$router.replace('/login');
    }
  },

  methods: {
    logout() {
      localStorage.removeItem('user');
      this.$router.replace('/login');
    }
  }
});
</script>

<style scoped>
/* 系统标题样式 */
.title {
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  padding: 20px 0;
  color: #fff;
  background-color: #409EFF;
}

/* 侧边栏样式 */
.el-aside {
  background-color: #304156;
  box-shadow: 2px 0 6px rgba(0, 0, 0, 0.1);
}

/* 菜单样式 */
.el-menu {
  border-right: none;
}

.el-menu-item,
.el-submenu__title {
  font-size: 14px;
  color: #fff;
}

.el-menu-item:hover,
.el-submenu__title:hover {
  background-color: #263445 !important;
}

.el-menu-item.is-active {
  background-color: #409EFF !important;
  color: #fff !important;
}

/* 图标样式 */
.el-icon-location {
  color: #fff;
}

/* 右边主体容器样式 */
.el-main {
  background-color: #f0f2f5;
  padding: 20px;
}
</style>